<template>
  <div>
    <!--导航区域-->
    <el-breadcrumb separator-class="el-icon-arrow-right" v-if="!isAdmin">
      <el-breadcrumb-item :to="{ path: '/user/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>文件管理</el-breadcrumb-item>
      <el-breadcrumb-item>日常文件</el-breadcrumb-item>
    </el-breadcrumb>

    <el-breadcrumb separator-class="el-icon-arrow-right" v-else>
      <el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>文件管理</el-breadcrumb-item>
      <el-breadcrumb-item>日常文件</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
    <div class="searchInput">
      <el-input  prefix-icon="el-icon-search" v-model="searchFileName" size="medium"  placeholder="请输入文件名"
                 clearable @clear="reSetPage()">
      </el-input>
    </div>
    <div class="searchButton">
      <el-button type="primary" @click="reSetPage()" size="small">查询</el-button>
    </div>
    <el-table :data="fileList" style="width: 90%" border>
      <el-table-column label="上传人" width="110">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <el-tag  size="medium">{{ scope.row.userName }}</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="文件名" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.fileName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="文件描述" width="280">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <span style="margin-left: 10px">{{ scope.row.fileDesc }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="文件大小" width="180">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <el-tag style="margin-left: 10px">{{ scope.row.fileSize }}</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="上传时间" width="180">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <el-tag style="margin-left: 10px">{{ scope.row.uploadTime }}</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column  label="操作">
        <template slot-scope="scope">
          <el-button  type="primary" size="small">
            <a :href='"http://101.37.78.254:8090/602system/file/download?fileName="+ scope.row.realFileName'>下载</a>
          </el-button>
          <el-button size="small" type="danger" v-if="isDisable"
            @click="deleteFile(scope.row.realFileName)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
      <!--分页-->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[8,9, 10, 11, 12]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
  export default {
    name: 'DailyFile',
    data() {
      return {
        isAdmin: false,
        //判断用户权限展示删除和更改功能
        isDisable:false,
        fileType: '日常文件',
        searchFileName:'',
        total: 1,
        //默认页码为1
        pageNum:1,
        //默认一页显示10条
        pageSize:8,
        fileList: [],
      }
    },
    methods:{
      //删除功能
      async deleteFile(realFileName){
        const confirmResult = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err => {
          return err;
        });
        //当用户确认时，则返回值为字符串：confirm
        //取消时，返回字符串cancel
        if (confirmResult !== 'confirm'){
          return this.$message.info("已取消删除")
        }
        const {data: res} = await this.$http.delete(`file/delete/${realFileName}`);
        if (res.status !== 200){
          return this.$message.error(res.msg);
        }
        console.log(res)
        this.getFileList();
        return this.$message.success("删除成功!");
      },
      reSetPage(){
        this.pageNum = 1;
        this.pageSize = 8;
        this.getFileList();
      },
      async getFileList(){
        const {data: res} = await this.$http.get('file/getFiles',{
            params: {
              fileType: this.fileType,
              pageNum: this.pageNum,
              pageSize: this.pageSize,
              searchFileName: this.searchFileName
            }
          });
        if (res.status !== 200){
          return this.$message.error(res.msg);
        }
        console.log(res);
        this.fileList = res.data.fileList;
        this.total = res.data.total;
      },
      handleSizeChange:function(size){   //一页显示多少条
        this.pageSize = size;
        this.getFileList();
      },
      handleCurrentChange:function(currentPage){  //页码更改方法
        this.pageNum = currentPage;
        this.getFileList();
      }
    },
    mounted(){
       var userInfo = JSON.parse(window.sessionStorage.getItem("user"));
       if (userInfo.userAuthority == 2){
         this.isDisable = true;
         this.isAdmin = true;
       }
       this.getFileList();
    }
  }
</script>
<style scoped lang="scss">
  .add{
    margin-bottom:20px;
  }
  .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
    font-size: 20px;
  }
  .el-icon-arrow-down {
    font-size: 20px;
  }
  .el-dropdown{
    float: right;
  }
  .searchInput{
    width:20%;
    margin-right: 10px;
    margin-bottom: 20px;
    float: left;
  }
  .searchButton{
    float: left;
  }
  a{
    color: #fff;
    width:150px;
  }
  .pagination{
    margin-top: 20px;
  }
</style>
